<template>
  <!-- 黑名单弹框 -->
  <div class="blacklist">
    <el-dialog
      title="黑名单列表"
      :visible.sync="isBlacklist"
      width="50%"
      :before-close="cancel">
      <div class="top">
        <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        <el-button
          class="search-btn"
          type="success"
          @click="add"
          style="background-color: rgb(0, 161, 108);"
        >添加</el-button>
        <el-button
          class="search-btn"
          type="danger"
          @click="remove()"
          :disabled="removeDisabled"
        >移除</el-button>
      </div>
      <div class="table">
        <el-table :data="blacklistData" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="operation" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="submit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
    <add @close="closeAdd" :is-add="isAdd"></add>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import Add from '@/framework/components/dialog/live/list/add'
import {find,count,deleteBlack} from "@/project/service/black"
import PageMixin from '@/framework/mixins/pageMixin'

export default {
  name:'blacklist',
  mixins: [
    PageMixin,
  ],
  props: {
    isBlacklist:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
      return {
        searchItems: [
          {name: '用户昵称', key: 'nickname', type: 'string'}
        ],
        blacklistData:[
          // {nickname:'诸葛亮'},
          // {nickname:'夏侯惇'},
        ],//黑名单弹框中的表格数据
        isAdd:false,//是否添加黑名单
        idList:[],
        removeDisabled:true,//是否禁用移除按钮
      }
  },
  components: { Search,Add },
  created(){
    this.listUpdate()
  },
  methods: {
    //获取黑名单列表
    search(obj,type){
      find(obj,data =>{
        console.log(data)
        this.blacklistData = data
      })
      if(type == 'search'){
        this.$message.success('查询成功')
      }
    },
    //获取统计黑名单数据条数
    getCount(nickname){
      count({nickname},data => {
        console.log(data)
        this.total = data
      })
    },
    //列表更新
    listUpdate(){
      let listParam = {
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(listParam)
      this.getCount()
    },
    //条件搜索
    searchBySearchItem(res){
      console.log(res)
      let param = {
        nickname: res.nickname,
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(param, 'search')
    },
    //表格行选择
    handleSelectionChange(row){
      let list = []
      if(row.length>0){
        this.removeDisabled = false
        row.forEach(item=> {
          list.push(item.id)
        })
      }else{
        this.removeDisabled = true
      }
      this.idList = list
    },
    //添加
    add(){
      this.isAdd = true
    },
    //关闭添加
    closeAdd(isUpdate){
      this.isAdd = false
      if(isUpdate){
        this.listUpdate()
      }
    },
    //移除
    remove(id){
      this.$confirm('是否确认将该用户移除黑名单？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)
        deleteBlack({idList: this.idList},data => {
          console.log(data)
          if(data == '204'){
            this.$message({
              type: 'success',
              message: '移除成功！'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //确定
    submit(){
      this.cancel()
    },
    //取消
    cancel(){
      this.$emit('close',false);
    }
  }
}
</script>

<style lang="less" scoped>
.top{
  display: flex;

  .label{
    margin-right: 10px;
  }

  .search-btn{
    margin-left:10px;
    padding:10px;
    width:44px;
    height:32px;
  }
}

.table{
  margin-top:20px;
}
</style>
